<template>
  <div class="event-count-chart">
    <el-dialog
      :title="dialogTitle"
      v-model="$store.eventCountChartShow"
      width="50%"
      :close-on-click-modal="false"
          >
      <hr style="margin-bottom: 10px;" color="#f0f0f0">
      <el-button type="primary" @click="handleByMonth">按月份统计</el-button>
      <el-button type="success" @click="handleByType">按类型统计</el-button>
      <el-tooltip content="导出图片" placement="top">
        <el-button round type="info" @click="exportChart" style="float: right;"><i class="iconfont icon-daochutupian" style="color:black"></i></el-button>
      </el-tooltip> 
      <div class="dialog-content">
        <h2>交通事件({{ eventNum }}起)</h2>     
        <div class="chart">
          <v-chart ref="chart" :option="option" style="width: 600px; height: 600px;margin: 0 auto;"></v-chart>
        </div>          
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import {ref,onMounted, computed,watch} from "vue"
import {app} from "../../main.js"
import VueEcharts from 'vue-echarts'
app.component('v-chart', VueEcharts)
import { useMapStore } from "../../stores/map.js";
import {handleLineChartData} from "../../hooks/usehooks.js"
const $store = useMapStore()
const localData=computed(()=>$store.tableData)
const eventNum=computed(()=>localData.value.length)
const dialogTitle = ref("事件统计图")
const option = ref({})
const chart = ref(null);
const finalData=computed(()=>{
  const result = localData.value.reduce((acc, item) => {
  const eventType = item.AttValue[1];
  if (acc[eventType]) {
    acc[eventType]++;
  } else {
    acc[eventType] = 1;
  }
  return acc;
}, {});
const finalResult = Object.entries(result).map(([name, value]) => ({ value, name }));
return finalResult;
})
//折线图渲染
const renderChartLine=(data1,data2)=>{
  option.value = {
  xAxis: {
    type: 'category',
    data: data1
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: data2,
      type: 'line',
      smooth: true
    }
  ]
};
}
// 饼图渲染
const renderChartPie=(data)=>{
  option.value= {
  title: {
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    right: '5%'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};
}
//按月份分类统计(调用renderChartLine)
const handleByMonth=()=>{
  const monthData=handleLineChartData(localData.value)
  console.log(monthData)
  const data1=Object.keys(monthData)
  const data2=Object.values(monthData)
  renderChartLine(data1,data2)
}
//按类型分类统计(调用renderChartPie)
const handleByType=()=>{
  console.log(finalData.value)
  renderChartPie(finalData.value)
}
//导出图片
const exportChart = () => {
  if (chart.value) {
    const imgData = chart.value.getDataURL({
      type: 'png',
      pixelRatio: 2,
      backgroundColor: '#fff'
    });
    const link = document.createElement('a');
    link.href = imgData;
    link.download = 'chart.png';
    link.click();
  }
};
watch(localData,(val)=>{
  handleByMonth()
})

</script>

<style lang="scss" scoped>
:deep(.el-dialog){
  height: 800px;
  margin-top: 0;
}
.dialog-content{
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.el-dialog__title {
  color: #303133;
  font-size: 18px;
  font-weight: bolder;
}
:deep(.el-dialog__body){
  box-sizing: border-box;
      height: 558px;
      .chart {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
      }
}

</style>